

<!-- 海报分享 -->
<template>
	<view class="content">
		<view class="flex-rwo-center" v-if="img_src"><image @load="jiazai" :src="imgSite+img_src" class="poster"></image></view>
		
		<button class="version-btn" @tap="save()">保存图片</button> 
		<view class="flex-all-center">保存到相册可分享到朋友圈</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { base64ToPath } from '@/js_sdk/image-tools/index.js'
export default {
	components: {},
	data() {
		return {
			icon: {},
			img_src:'',
			downing:false,
			progress:'0'
		};
	},
	computed: {
		...mapState(['imgSite'])
	},
	onLoad(options) {
		
		uni.showLoading({
			title:'加载中'
		})
		let that = this;
		that.$api.globalUtil.requestAjax({
			url: '/shareImg/posterImg',
			method: 'POST',
			data: {
				detailType: options.detailType,
				goodsCd: options.id
			},
			success: function(res) {
				that.img_src = res.data.response
			}
		});
	},
	onReady() {
	},
	methods: {
		jiazai(){
			uni.hideLoading();
		},
		save() {	
			let that = this;
			if(!that.downing){
				that.downing = true;
				uni.showToast({
				  title:'下载中',
				  icon:'none'
				})
				
				
				uni.downloadFile({
					url: that.imgSite + that.img_src,
					success: downloadResult => {
						console.log(downloadResult);
						if (downloadResult.statusCode === 200) {
							
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: function() {
									that.downing = false;
									uni.hideLoading();
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								}, 
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
									
									uni.hideLoading();
								}
							});
							
							
						}
					},
					fail: res => {
						console.log('下载失败', res);
					}
				});
				
			}
		},
	}
};
</script>

<style lang="less">
page,
.content {
	background: #fff;
	height: 100%;
}
.poster {
	width: 689rpx;
	height: 1117rpx;
	margin: 51rpx auto 0 auto;
}
.flex-rwo-center {
	width: 100%;
}
.version-btn {
	position: relative;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 662rpx;
	height: 90rpx;
	font-size: 30rpx;
	color: #fff;
	background: #FE5E49;
	border-radius: 45rpx;
	margin-top: 52rpx;
}
.flex-all-center {
	width: 100%;
	height: 81rpx;
	font-size: 26rpx;
	color: #bfbfbf;
}
</style>
